<template>
  <div class="scp-tabs-card">
    <el-tabs type="card"  v-model="currName" @tab-click="handleClick" :before-leave="beforeTabClick" ref="tabs_card">
      <el-tab-pane v-for="(item, index) in tabsCardData" :key="index" :name="`pane_name_${index}`">
        <span slot="label" :class="[index !== 0 ? 'tab-pane-label': '']">{{item.label}}</span>
        <div class="tabs-card-grid" v-if="item.grids" :style="{height: height}">
          <Gird :girdData="item.grids" :gutter="'0px'" :gutterBottom="'0px'" :columnNum="cols">
            <template #content="acceptProps">
              <GridItem
                shadow="never"
                :icon="acceptProps.item[`icon`]"
                :des="acceptProps.item[`des`]"
                @triggerGridItem="triggerGridItem(acceptProps.item[`key`])"
              >
              </GridItem>
            </template>
          </Gird>
        </div>
        <div class="tabs-card-table" v-if="item.tableColumns" :style="{height: height}">
          <el-table
            border
            tooltip-effect="dark"
            :data="tableData"
            style="width: 100%"
            header-row-class-name="tabs-card-table-header"
            :header-cell-style="{background: '#53ABF3', color: '#fff', borderRight: '0px solid #ebeef5'}"
          >
            <el-table-column
              v-for="(col,index) in item.tableColumns"
              :key="index"
              align="center"
              :show-overflow-tooltip="true"
              :prop="col.columncode"
              :label="col.columnname"
            ></el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import Gird from './Gird'
import GridItem from './GridItem'
export default {
  /**
   * 自定义样式的Tabs
   */
  name: 'TabsCard',
  props: {
    height: {
      type: String,
      default: '187px'
    },
    cols: {
      type: Number,
      default: 5
    },
    tabsCardData: {
      type: Array,
      default: () => {return []}
    },
    tableData: {
      type: Array,
      default: () => {return []}
    }
  },
  data () {
    return {
      tabs_name_title: 'pane_name_0',
      currName: 'pane_name_1'
    }
  },
  components: {Gird, GridItem},
  created () {
  },
  mounted () {
    const that = this
    this.$nextTick(function () {
      // 首次加载
      that.moreHandleStyle()
    })
    // 挂载 reisze 事件 → 屏幕缩放时监听宽度变化
    window.addEventListener('resize', function () {
      return (() => {
        that.$nextTick(() => {
          that.moreHandleStyle()
        })
      })()
    })
  },
  methods: {
    beforeTabClick (tab) {
      // this.tabs_more_1 = tab
      return tab !== this.tabs_name_title
    },
    handleClick (tab, event) {
      this.currName = tab.name
    },
    moreHandleStyle () { // 动态修改tabs_more样式
      if (this.$refs.tabs_card) {
        let tabs2W = this.$refs.tabs_card.$el.offsetWidth
        let panes2 = this.$refs.tabs_card.$refs.nav.$refs.tabs
        let tabsMoreWidth2 = tabs2W
        for (let i = panes2.length - 1; i > 0; i--) {
          tabsMoreWidth2 = tabsMoreWidth2 - panes2[i].offsetWidth
        }
        panes2[0].style.width = `${tabsMoreWidth2}px`
      }
    },
    triggerGridItem (k) {
      console.log(k)
    }
  },
  watch: {
  }
}
</script>
<style lang="scss">
.scp-tabs-card {
  padding: 20px;
  background-color: $--home_tabs_bg_color;
  .el-tabs__header {
    border-bottom: 0px solid $--border_color !important;
    // margin: 0 0px;
    .el-tabs__nav {
      border: 0px solid $--border_color !important;
      float: right;
    }
    .el-tabs__item {
      line-height: 30px;
      height: 30px;
      padding: 0 0px;
      border-bottom: 0px solid transparent !important;
      border-left: 0px solid $--border_color !important;
      &:nth-child(2) {
        padding-left: 0px !important;
      }
      &:last-child{
        padding-right: 0px !important;
      }
    }
    .is-active {
      line-height: 40px;
      height: 40px;
      .tab-pane-label {
        // background-image:linear-gradient(left,#7dd9fb,#53ABF3);
        // filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#7dd9fb, endColorstr=#53ABF3);
        // background-image:-moz-linear-gradient(left,#7dd9fb,#53ABF3);
        // background-image:-webkit-gradient(left,#7dd9fb,#53ABF3);
        // background-image:-webkit-linear-gradient(left,#7dd9fb,#53ABF3);
        // background-image:-o-linear-gradient(left,#7dd9fb,#53ABF3);
        // background: linear-gradient(to right, #7dd9fb 0%,#53ABF3 100%);
        background-color: $theme_summer_color;
        color: $--color_text_white; // $--color_text_white
        border-radius: 20px;
      }
    }
  }
  .el-tabs__content {
    border-top: 1px solid $--border_color !important;
    padding-top: 20px;
  }
  .tab-pane-label {
    display: inline-block;
    color: #004A86; //  $theme_summer_color
    // background-color: #c3c2c2;
    padding: 0 30px;
    margin-right: 10px;
    border-radius: 5px;
  }
  .el-card {
    background-color: $--home_tabs_bg_color;
  }
  .tabs-card-table {
    .tabs-card-table-header {
      th:first-child {
        border-radius: 5px 0px 0px 5px;
      }
      th:nth-last-child(2) {
        border-radius: 0px 5px 5px 0px;
      }
    }
  }
}
</style>
